/* ========== 经典七彩按钮样式 ========== */

/* 七彩实体按钮 */
.btn__rainbow:not(.btn__text):not(.btn__ghost) {
    background: linear-gradient(45deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3);
    background-size: 300% 300%;
    animation: rainbow-flow 3s ease infinite;
    position: relative;
    overflow: hidden;
    border: none;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* 实体按钮的内部光泽 */
.btn__rainbow:not(.btn__text):not(.btn__ghost)::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
            45deg,
            transparent 30%,
            rgba(255, 255, 255, 0.3) 50%,
            transparent 70%
    );
    transform: rotate(45deg);
    transition: transform 0.6s;
}

.btn__rainbow:not(.btn__text):not(.btn__ghost):hover::after {
    transform: rotate(45deg) translateX(100%);
}

/* 实体按钮悬停效果 */
.btn__rainbow:not(.btn__text):not(.btn__ghost):hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.btn__rainbow:not(.btn__text):not(.btn__ghost):active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* ========== 七彩文字按钮 ========== */

.btn__rainbow.btn__text {
    background: transparent !important;
    border: none !important;
    position: relative;
}

.btn__rainbow.btn__text .btn__content,
.btn__rainbow.btn__text .btn__icon {
    background: linear-gradient(90deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3);
    background-size: 200% 200%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: rainbow-text-flow 3s ease infinite;
    font-weight: 700;
}

/* 文字按钮悬停效果 */
.btn__rainbow.btn__text:hover .btn__content,
.btn__rainbow.btn__text:hover .btn__icon {
    filter: brightness(1.2);
}

/* ========== 七彩幽灵按钮 ========== */

.btn__rainbow.btn__ghost {
    background: transparent !important;
    position: relative;
    border: 1px solid;
    border-image: linear-gradient(45deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3) 1;
}

/* 确保幽灵按钮内部透明 */
.btn__rainbow.btn__ghost::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    background: transparent;
    border-radius: inherit;
    z-index: -1;
}

.btn__rainbow.btn__ghost .btn__content,
.btn__rainbow.btn__ghost .btn__icon {
    background: linear-gradient(90deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3);
    background-size: 200% 200%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: rainbow-text-flow 3s ease infinite;
    font-weight: 600;
}

/* 幽灵按钮悬停效果 */
.btn__rainbow.btn__ghost:hover {
    filter: brightness(1.1);
}

/* ========== 七彩按钮点击脉冲效果 ========== */

/* 所有七彩按钮的脉冲 - 与普通按钮一样，只是边框是七彩的 */
.btn__rainbow ~ .btn__ripple {
    border: none;
    background: none;
}

.btn__rainbow ~ .btn__ripple::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 1px solid;
    border-image: linear-gradient(45deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3) 1;
    border-radius: inherit;
    opacity: 0.8;
    pointer-events: none;
    animation: ripple-expand-outward 0.6s ease-out forwards;
}

/* ========== 动画定义 ========== */

/* 背景流动动画 */
@keyframes rainbow-flow {
    0% {
        background-position: 0 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0 50%;
    }
}

/* 文字渐变流动 */
@keyframes rainbow-text-flow {
    0% {
        background-position: 0 50%;
    }
    100% {
        background-position: 200% 50%;
    }
}

/* ========== 特殊状态样式 ========== */

/* 禁用状态的七彩按钮 */
.btn__rainbow.disabled {
    filter: grayscale(0.5) brightness(0.8);
    opacity: 0.6;
}

/* 加载状态的七彩按钮 */
.btn__rainbow.loading {
    background-size: 400% 400%;
    animation: rainbow-flow 1s ease infinite;
}

/* 圆形七彩按钮增强 */
.btn__rainbow.btn__circle:not(.btn__text):not(.btn__ghost) {
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.3), transparent 50%),
    linear-gradient(45deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3);
    background-size: 100% 100%, 300% 300%;
    animation: none, rainbow-flow 3s ease infinite;
}

/* 焦点状态优化 */
.btn__rainbow:focus-visible {
    outline: none;
}

/* 确保背景透明的重要性 */
.btn__rainbow.btn__ghost,
.btn__rainbow.btn__text {
    background-color: transparent !important;
}